<template>
	<el-dialog title="会员账户明细" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="1200px">
		<div class="form-box">
			<el-form class="header-area" ref="searchForm" :model="searchForm" label-width="70px" style="height: auto">
				<el-row>
					<el-col :span="5">
						<el-form-item label="类型" prop="orderType">
							<el-select size="small" v-model="searchForm.orderType" placeholder="请选择类型">
							    <el-option label="全部" value=""></el-option>
								<el-option label="收入" value="1"></el-option>
							    <el-option label="支出" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="10">
						<el-form-item label="时间范围" prop="time" label-width="100px">
							<el-date-picker
								v-model="time"
								size="small"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="timestamp"
								:default-time="['00:00:00', '23:59:59']"
								style="width: 100%;"
							></el-date-picker>
						</el-form-item>
					</el-col>
					
					<el-col :span="3">
						<div class="search-submit">
							<el-button type="primary" size="small" @click="submitForm">查询</el-button>
							<el-button size="small" @click="resetForm('searchForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
			
			<el-table :data="tableData" border stripe>
				<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column label="会员账号" width="140">
					<template slot-scope="scope">
						{{userInfo.phone}}
					</template>
				</el-table-column>
				<el-table-column prop="orderType" label="类型" width="110" align="center">
					<template slot-scope="scope">
						<el-tag size="mini" type="warning" v-if="scope.row.orderType == 1">收入</el-tag>
						<el-tag size="mini" type="success" v-if="scope.row.orderType == 2">支出</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="amountChange" label="变动金额" width="120" align="right">
					<template slot-scope="scope">
						<span class="price-plus" v-if="scope.row.orderType == 1">+{{scope.row.amountChange.toFixed(2)}}</span>
						<span class="price-minus" v-if="scope.row.orderType == 2">{{scope.row.amountChange.toFixed(2)}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="amountAfter" label="账户余额" width="120" align="right">
					<template slot-scope="scope">
						{{scope.row.amountAfter.toFixed(2)}}
					</template>
				</el-table-column>
				<el-table-column prop="serialNum" label="关联订单号" width="200">
					<template slot-scope="scope">
						{{scope.row.serialNum ? scope.row.serialNum : '-'}}
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="时间" :formatter="forDate" width="160" align="center"></el-table-column>
				
				<el-table-column prop="remark" label="备注"></el-table-column>
				
				<!-- <el-table-column fixed="right" label="操作" width="120">
					<template slot-scope="scope">
						<el-button type="info" size="small" v-if="form.serialNum == scope.row.orderNo">已选择</el-button>
						<el-button type="primary" size="small" @click="chooseOrder(scope.row)" v-else>选择订单</el-button>
					</template>
				</el-table-column> -->
			</el-table>
			
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-size="pageSize"
					:total="total"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
			</div>
		</div>
		
		<div slot="footer">
			<el-button @click="close">关 闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import { getMemberAccountStatements } from '@api/shopCashierChangeShift/shopCashierChangeShift'
	import dayjs from 'dayjs'
	export default {
		props: {
			isShow: Boolean,
			userInfo: Object,
		},
		data() {
			return {
				searchForm: {
					orderType: '',
					beginCreateTime: '',
					endCreateTime: '',
				},
				time: [],
				
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					this.getData();
				}
			}
		},
		methods: {
			getData() {
				this.searchForm.beginCreateTime = this.time[0] == null ? '' : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss');
				this.searchForm.endCreateTime = this.time[1] == null ? '' : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss');
				
				getMemberAccountStatements({
					orderType: this.searchForm.orderType,
					beginCreateTime: this.searchForm.beginCreateTime,
					endCreateTime: this.searchForm.endCreateTime,
					userId: this.userInfo.userId,
					shopId: this.userInfo.shopId,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
					})
			},
			forDate (row, column) {
				return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
			},
			
			handleSizeChange(val) {
				this.pageSize = val;
				this.getData();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getData();
			},
			resetPage() {
				this.currentPage = 1;
				this.pageSize = 10;
				this.total = 0;
			},
			
			submitForm() {
				this.resetPage();
				this.getData();
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.time = [];
				this.resetPage();
				this.getData();
			},
			
			close() {
				this.$emit('close');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-submit {
		height: 40px;
		align-items: center;
		
		.el-button {
			height: 32px;
		}
	}
	.price-plus {
		font-size: 18px;
		color: #f00;
	}
	.price-minus {
		font-size: 18px;
		color: #666;
	}
	
	.page {
		margin-top: 20px;
	}
</style>